<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>修改联系人</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/order/orderDetail.css" rel="stylesheet"/>
    <link href="../../../css/order/contact.css" rel="stylesheet"/>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>选择联系人</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
        <div @click="confirmSelect" class="right">确定</div>
    </div>

    <div class="container">

        <div class="card-box contact">
            <div class="order-title">请选择联系人类型</div>
            <div>
                <div class="xlb-tab-select">
                    <div @click="dealClick(1)" :class="{selected:tabIndex == 1}" class="xlb-tab-select-item left">
                        行内对接人
                    </div>
                    <div @click="dealClick(2)" :class="{selected:tabIndex == 2}" class="xlb-tab-select-item right">
                        临时配合人
                    </div>
                </div>
            </div>
        </div>

        <div class="card-box ">

            <div v-show="tabIndex == 1" v-for="item in list" @click="dealSelect(item.abutmentUserId,item)"
                 class="xlb-li contact" :key="item.id">
                <div class="left"><img class="icon" src="../../../img/common/default_person.jpg" alt="">{{item.abutmentUserName}}
                </div>
                <div class="right"><img v-show="selected == item.abutmentUserId"
                                        src="../../../img/common/ic_selected@3x.png"></div>
            </div>

            <div v-show="tabIndex == 2">
                <div>
                    <input v-model="userAddForm.name" class="xlb-input no-label" placeholder="请输入配合人姓名" type="text">
                </div>
                <div class="input-line">
                    <input v-model="userAddForm.phone" class="xlb-input no-label" placeholder="请输入配合人联系电话"
                           type="number">
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        mounted: function () {
            this.initList();
        },
        data: {
            code: '',
            tabIndex: 1,
            selected: '',
            contactItem: {},
            list: [],
            userAddForm: {
                phone: '',
                name: '',
                type: 2
            },
            form: {
                abutmentUserPhone: '',
                abutmentUserName: '',
                abutmentUserId:'',
                orderId:''
            }
        },
        methods: {
            dealClick: function (type) {
                if (type == 1) {
                    this.tabIndex = 1;
                } else {
                    this.tabIndex = 2;
                }
            },
            dealSelect: function (id, item) {
                this.selected = id;
                this.contactItem = {
                    name: item.abutmentUserName,
                    phone:item.abutmentUserPhone,
                    id: id,
                    type: 1
                };

            },
            initList: function () {
                Resource.get(USER_CONTACT_API, {}, function (res) {
                    vm.list = res;
                })
            },
            confirmSelect: function () {
                var userObj = null;
                if (this.tabIndex == 1) { // 手机联系人
                    if(!this.contactItem.type){
                        return mui.toast("请选择行内对接人")
                    }
                    userObj = this.contactItem;
                } else {
                    if(!this.userAddForm.phone){
                        return mui.toast("请填写临时配合人")
                    }
                    userObj = this.userAddForm;
                }
                var params = {
                    abutmentUserPhone: userObj.phone,
                    abutmentUserName:userObj.name,
                    abutmentUserId:userObj.id? userObj.id:'',
                    orderId:vm.form.orderId
                };
                console.log(JSON.stringify(params));
                Resource.post(ORDER_CONTACT_PERSON_API, params, function (res) {
                    mui.toast("操作成功！");
                    // 获取窗口对象
                    ws = plus.webview.currentWebview();
                    wo = ws.opener();
                    wo.evalJS("dealSelectContact('" +JSON.stringify(userObj) + "');");
                    mui.back();
                })


            }

        }
    });
    mui.plusReady(function () {
        var self = plus.webview.currentWebview();
        var orderId =  self.orderId;
        if(orderId =='' || orderId == 'undefined'){
            return;
        }
        console.log('listen ----------orderId =' + orderId);
        vm.form.orderId = orderId;

    });
</script>
</body>
</html>